/* eslint-disable react/no-array-index-key */
import React from 'react'
import styles from './index.module.less'
import WallImg from '@/assets/report/department/wall.png'
import LeftFootImg from '@/assets/report/department/leftFoot.png'
import RightFootImg from '@/assets/report/department/rightFoot.png'
import type { SwiperItemProps, ManageType } from '../../interface'

interface Props extends SwiperItemProps {
    multipleIndex: number
    data: ManageType['region_student_module']
}

export const FootprintPage = (props: Props) => {
    const { current, itemIndex, multipleIndex = 0, data } = props
    const isActive = current === itemIndex

    return (
        <div className={styles.project}>
            <h6>2024年</h6>
            <h4>马兰花开，香飘四方</h4>
            <h4>创业培训工作在各地深入开展</h4>
            <div className={isActive ? styles.active : styles.project_wrapper}>
                <div
                    className={styles.project_wrapper_content}
                    // onTouchMove={e => {
                    //     e?.stopPropagation()
                    // }}
                >
                    {data?.map((item, index) => {
                        return (
                            <div key={index} className={styles.project_wrapper_content_item}>
                                <h6>
                                    {multipleIndex * 3 + index + 1}.<span> {item.region}</span> 「
                                    {item.group_num}期班级」
                                </h6>
                                <section>
                                    <div className={styles.statistics}>
                                        {item.student_num}名学员 · {item.quality_student_num}
                                        人培训合格
                                    </div>
                                    <div className={styles.quality}>
                                        <div>合格率</div>
                                        {item.quality_percent}
                                    </div>
                                </section>
                            </div>
                        )
                    })}
                </div>
            </div>
            <img className={styles.wallImg} src={WallImg} />
            <img
                className={isActive ? styles.active_left : styles.leftFooterImg}
                src={LeftFootImg}
            />
            <img
                className={isActive ? styles.active_right : styles.rightFooterImg}
                src={RightFootImg}
            />
        </div>
    )
}

export default FootprintPage
